﻿<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>水浒群英传108位</title>
    <style>
        html,body {
            margin: 0;
            height: 100%;
            background: #fafafa;
        }

        .sh-hero {
            height: 100%;
        }

        .sh-hero dl {
            /* border-bottom: 4px solid #eee; */
            /* padding: 0 12px 11px; */
            list-style: none;position: relative;
            background-color: #fafafa;
            padding: 0;
            margin: 0 auto;
            float: left;
            height: 100%;
            border: 0;
        }
        .sh-hero dl dt{
            height: 100%;
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
            text-align: center;
            width: 200px;
        }
        .sh-hero .one{
            border-left: 2px solid #eee;
            width: 280px;
            overflow: scroll;
        }
        .sh-hero .one dd:first-of-type{
            padding-top: 10px;

        }
        .sh-hero dd {
            line-height: 26px;
            font-size: 15px;
            margin: 0;
            padding-left: 10px;
        }
        .sh-hero dd:last-of-type {
            padding: 15px;
            text-align: justify;
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            max-height:61%;
            overflow: scroll;
            /*border-radius:0 0 15px 15px;*/
            background: rgb(243, 243, 243);
        }

        .list-num {
            color: #eee;
            background: #333;
            position: fixed;
            top: 0;
            left: 0;
            height: 100%;
            overflow: scroll;
            z-index: 10;
            line-height: 50px;
            font-size: .8em;
        }

        .list-num ul {
            list-style: none;padding: 0;
            margin: 0;
        }
        .list-num li{
            padding-left: 10px;padding-right: 6px;
            border-bottom: 1px solid #555;
        }
        .long-bar{
            position: fixed;
            width: 100%;
            height: 30px;
            bottom: 0;left: 0;

        }
        .long-bar input{
            width: 90%;
            display: block;
            margin: 0 auto;
        }
        canvas{
            width: 300px;
            height: 150px;
            position: fixed;
            bottom: 2%;
            left: 67%;
        }
    </style>
    <script src="js/sh.js"></script>
</head>
<script src="js/sh.js"></script>
<body>
<div class="list-num">
    <ul>
        <li>1.jjjj</li>
    </ul>
</div>
<div class="sh-hero">

</div>
<div class="long-bar" >
    <!--<input type="range" max="107" min="0" step="1">-->
</div>
</body>
<script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
window.onresize=function () {
    var decH=$(document).height();
    var decW=$(document).width();
    if(decW < decH){
        alert("请横屏显示");
        $("body").css("display","none");
    }else {
        $("body").css("display","block");
    }
};
    var decH=$(document).height();
    var decW=$(document).width();
    if(decW < decH){
        alert("请横屏显示");
        $("body").css("display","none");
    }else {
        $("body").css("display","block");
    }
    function drawCanvas(num) {
        var myVas=document.getElementById("myCanvas");
       if(myVas){
           myVas.remove();
       }
        var longBar=document.querySelector(".long-bar");
        var myCanvas = document.createElement("canvas");
        myCanvas.id="myCanvas";
        longBar.appendChild(myCanvas);
        var ctx = myCanvas.getContext("2d");
        ctx.beginPath();
        var reg =  /\d+/g;
        //百分比攻击力，防御力，范围
        //获取英雄的攻击力80/100（防御力，攻击范围类似），百分比
        var attack_percent = yxS[num][5].match(reg)[0]/100;//获取英雄的攻击力
        var power_percent = yxS[num][7].match(reg)[0]/100;//获取英雄的防御力
        var range_percent = yxS[num][6].match(reg)[0]/100;//英雄的攻击范围
        ctx.moveTo(100 - 70 * attack_percent * 0.866, 70 * attack_percent * 0.5 + 75);//攻击力
        ctx.lineTo(100, 75 - 70 * range_percent);//攻击范围
        ctx.lineTo(100 + 70 * power_percent * 0.866, 70 * power_percent * 0.5 + 75);//防御力
        ctx.lineTo(100 - 70 * attack_percent * 0.866, 70 * attack_percent * 0.5 + 75);//攻击力
        // 创建渐变
        var gradient = ctx.createLinearGradient(0, 0, myCanvas.width, 0);
        gradient.addColorStop("0", "red");
        gradient.addColorStop("0.5", "#fff");
        gradient.addColorStop("1.0", "blue");
        // 用渐变填色
        ctx.fillStyle = gradient;
        ctx.fill();
        ctx.strokeStyle = "#888";
        ctx.moveTo(170, 75);
        ctx.arc(100, 75, 70, 0, 2 * Math.PI);
        ctx.moveTo(140, 75);
        ctx.arc(100, 75, 40, 0, 2 * Math.PI);
        ctx.moveTo(100, 75);
        ctx.lineTo(39.38, 110);//攻击力点
        ctx.moveTo(100, 75);
        ctx.lineTo(100, 5);//攻击范围
        ctx.moveTo(100, 75);
        ctx.lineTo(160.62, 110);//防御力
        //写字
        ctx.font = "14px Arial";
        ctx.fillStyle = "#000";
        ctx.fillText("R", 78, 15);
        ctx.fillText("A", 26, 125);
        ctx.fillText("P", 150, 125);
        ctx.stroke();
    }
</script>
<script>

    var str2 = "";
    yxS.forEach(function (e, index) {//英雄人物排名循环列表
        if(index<10){
            str2 += "<li>00" + index + "." + e[0] + "</li>";
        }else if(index>=10&&index<100){
            str2 += "<li>0" + index + "." + e[0] + "</li>";
        }else if(index>=100&&index<109) {
            str2 += "<li>" + index + "." + e[0] + "</li>";
        }
    });

    $(".list-num ul").html(str2);

    $(".list-num li").on("click",function (){
       var num=$(this).index();

       $(".list-num").fadeOut();
        var myView = document.querySelector(".sh-hero");
        var str = "";
        var i=num+1;
            str += "<dl>";
            str += "<dt style=background-image:url(png108/sh_" + i + ".png)></dt></dl><dl class='one'>";
            for (var j = 0; j < yxS[i].length; j++) {
                str += "<dd>" + yxS[i][j] + "</dd>";
            }
            str += "</dl>";
        drawCanvas(i);
        myView.innerHTML = str;
        $(".sh-hero dd:last-of-type").addClass("on");
        $(".sh-hero .one").on("click", function () {
            $(this).children(".on").stop(true,true).slideToggle("slow");
        });
    });
    //长按屏幕显示列表
    var timer=null;
    $(document).on("touchstart",function(e){
        timer=new Date();
    });
    $(document).on("touchend",function(e){
        var timers=new Date();
        if(timers-timer>1100){
            $(".list-num").fadeIn();
        }
    });
    $(".sh-hero").on("dblclick",function () {
        $(".list-num").fadeIn();
    })
//代码上传时间：10:47 2018/3/13 作者：huo611 qq:862450460
</script>
</html>